<template>
	<view class="w-100">
		<view class="fixed-top flex-1 bg-white">
			<view class="flex-x row-ac">
				<view class="row flex-1 tab-box font-s-4 text-muted " v-for="(item,index) in tabList" :key="index"
					@click="onclickTab(index)">
					<view :class="tabIndex == index ? 'font-s-45 font-w text-black': ''">{{ item.name }}</view>
				</view>
			</view>
			<view class="row-ac flex-1 row-height mx-3">
				<view class="flex-1 row-ac ">
					<view class="index-style row row-height font-s-2 text-muted">排名</view>
					<view class="flex-1 ml-2 font-s-2 text-muted">用户名/昵称</view>
				</view>
			</view>
		</view>
		<view class="flex-1" style="height: 190rpx;"></view>
		<view class="flex-1 mx-3">
			<template v-if="tabIndex == 0">
				<view class="row-ac flex-1 row-height border-bottom" v-for="(item, index) in personList" :key="index">
					<view class="flex-1 row-ac">
						<view class="index-style row row-height">
							<view class="stand-box row font-s-2" :style="{ backgroundColor: getColor(index) }">
								{{ index + 1 }}</view>
						</view>
						<view class="flex-1 ml-2 font-s-45">{{ item.nickname }}</view>
					</view>
					<!-- <view class="font-s-45">{{ item.total_points }}</view> -->
				</view>
			</template>
			<template v-if="tabIndex == 1">
				<view v-if="!loadingState" class="flex-1 row" style="height: 500px;">
					<text>加载数据中....</text>
				</view>
				<view v-else>
					<view class="row-ac flex-1 row-height border-bottom" v-for="(item, index) in teamList" :key="index">
						<view class="flex-1 row-ac">
							<view class="index-style row row-height">
								<view class="stand-box row font-s-2" :style="{ backgroundColor: getColor(index) }">
									{{ index + 1 }}</view>
							</view>
							<view class="flex-1 ml-2 font-s-45">{{ item.nickname }}</view>
						</view>
						<!-- <view class="font-s-45">{{ item.total_points }}</view> -->
					</view>
					<view class="py-2 flex-1 row" v-if="strokeState">
						<text class="font-s-3 text-muted">加载数据中....</text>
					</view>
				</view>
			</template>

		</view>

	</view>
</template>

<script>
	import {
		teampointrankingUrl,
		personpointrankingUrl,
	} from '@/api/index';
	export default {
		data() {
			return {
				strokeState: false,
				loadingState: false,
				loadingImg: '../../static/img/loading.gif',
				tabIndex: 0,
				tabList: [{
						id: 0,
						name: '个人积分排行'
					},
					{
						id: 1,
						name: '团队积分排行'
					}
				],
				queryInfo: {
					page: 1,
					page_size: 20
				},
				personList: [],
				personTotal: '',
				teamList: [],
				teamTotal: ''
			}
		},
		onLoad() {
			this.getPersonpointranking()
			this.getTeampointranking()
		},
		onReachBottom() {
			this.onReachBottomHandle();
			if(this.tabIndex == 1){
				this.strokeState = true;
			}
		},
		methods: {
			getPersonpointranking() {
				this.$R.get(personpointrankingUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.personList = res.data.list
						this.personTotal = res.data.total
					}
				})
			},
			getTeampointranking() {
				this.$R.get(teampointrankingUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.teamList = res.data.list
						this.teamTotal = res.data.total
						this.loadingState = true;
					}else{
						this.loadingState = false;
					}
				})
			},
			onReachBottomHandle() {
				if (this.tabIndex == 0) {
					if (this.personTotal != this.personList.length) {
						this.queryInfo.page_size += 15;
						this.getPersonpointranking()
					}
				} else {
					if (this.teamTotal != this.teamList.length) {
						this.queryInfo.page_size += 15;
						this.getTeampointranking()
						setTimeout(() => {
							this.strokeState = false;
						}, 8000);
					}
				}

			},
			getColor(index) {
				if (index === 0) {
					return '#dc143c'; // 红色
				} else if (index === 1) {
					return '#d2691e'; // 黄色
				} else if (index === 2) {
					return '#ff7f50'; // 绿色
				} else {
					return '#999'; // 灰色
				}
			},
			onclickTab(index) {
				this.tabIndex = index
			}
		}
	}
</script>

<style lang="scss">
	.tab-box {
		height: 90rpx;
	}

	.row-height {
		height: 100rpx;
	}

	.index-style {
		width: 110rpx;
	}

	.stand-box {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		color: #fff;
	}
</style>